<script setup>
defineProps({
    name: String,
    checkName:  String,
    color: String,
    check: Boolean
})
const emit = defineEmits(['check'])
</script>
<template>
    <div class="interact-button" @click="emit('check')">
        <span class="icon" :style="{ 'color': check ? color:'unset' }" >
            <slot></slot>
        </span>
        <span class="name" :style="{ 'color': color }">{{check? checkName: name }}</span>
    </div>
</template>


<style scoped>
.interact-button {
    display: inline-block;
    height: 30px;
}

.name {
    font-size: 13px;
    margin-top: 5px;
    opacity: 0.7;
}

.icon {
    vertical-align: middle;
    transition: .3s;

}

.icon:hover {
    cursor: pointer;
    font-size: 18px;
}
.name {
    vertical-align: middle;
    transition: .3s;

}

.name:hover {
    cursor: pointer;
    font-size: 18px;
}
</style>